*<template>
	<view class="content">
		<view class="list">
			<uni-swipe-action>
				<uni-swipe-action-item v-for="(item,index) in list" :key="index" :item-id="index" >
					<view class="item">
						<view class="pic">
							<image :src="baseUrl+ item.img" mode="heightFix"></image>
						</view>
						<view class="info-text">
							<view class="t1">
								{{item.name}}
							</view>
							<view class="t2">
								￥{{item.price}}
							</view>
							<view class="buy-btn" @click="addCart" :data-skuId="item.sku_id">
								<image src="../../static/images/icon40.png" mode="widthFix"></image>
								加入购物车
							</view>
						</view>

					</view>
					<template v-slot:right class="delbtn">
						<view @click="bindClick" :data-id="item.productId"><text>删除</text></view>
					</template>
				</uni-swipe-action-item>
				<!-- <view class="item">
					<view class="pic">
						<image src="../../static/images/collect01.png" mode="heightFix"></image>
					</view>
					<view class="info-text">
						<view class="t1">
							UMIND戒指
						</view>
						<view class="t2">
							￥3500
						</view>
						<view class="buy-btn">
							<image src="../../static/images/icon40.png" mode="widthFix"></image>
							加入购物车
						</view>
					</view>
				</view> -->

			</uni-swipe-action>
		</view>
	</view>
</template>

<script>
	import {
		likeList
	} from '@/api/user.js';
	import {
		addLike
	} from '@/api/product.js';
	import {
		addCart
	} from '@/api/cart.js';
	export default {
		components: {},
		data() {
			return {
				baseUrl: this.$baseUrl,
				pageNumber: 1,
				pageSize: 10,
				list:[]
			};
		},
		onLoad() {
			this.init();
		},
		methods: {
			init() {
				likeList({pageNumber:this.pageNumber,pageSize:this.pageSize}).then(res => {
					console.log(res)
					this.list = res.data.productList
				})
			},
			bindClick(e){
				console.log(e)
				addLike({
					id:e.currentTarget.dataset.id
				}).then(res => {
					
					
					this.init();
				})
			},
			addCart(e) {
				console.log(e)
				addCart({
					skuId: e.currentTarget.dataset.skuid,
					quantity: 1
				}).then(res => {
					console.log(res)
					uni.showToast({
						title: res.message,
						icon: 'none'
					})
				})
			},
		}
	}
</script>

<style lang="scss">
	.list {
		.uni-swipe {
			width: 100%;

			.uni-swipe_text--center {
				display: flex;
				align-items: center;
			}
		}

		.button-group--right {
			width: 120rpx !important;
			background-color: #f4f4f4;
			display: flex;
			align-items: center;
			color: #595757;
			font-size: 28rpx;
			justify-content: center;
		}

		// .delbtn{
		// 	width: 120rpx !important;
		// 	background-color: #f4f4f4;
		// 	display: flex;
		// 	align-items: center;
		// 	color: #595757;
		// 	font-size: 28rpx;
		// 	justify-content: center;
		// }


		.item {
			display: flex;
			align-items: center;
			width: 100%;
			padding: 40rpx 30rpx;
			border-bottom: 1px solid #f0f0f0;

			.pic {
				width: 210rpx;
				height: 210rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				margin-right: 30rpx;

				image {
					height: 210rpx;
				}
			}

			.info-text {
				font-size: 24rpx;
				width: 100%;
				flex: 1;

				.t1 {
					color: #595757;
					margin-bottom: 20rpx;
				}

				.t2 {
					color: #898989;

				}

				.buy-btn {
					display: flex;
					align-items: center;
					justify-content: center;
					width: 200rpx;
					height: 60rpx;
					background-color: #b81c22;
					font-size: 28rpx;
					color: #ffffff;
					margin-top: 70rpx;
					float: right;

					image {
						width: 28rpx;
						margin-right: 15rpx;
					}
				}
			}
		}
	}
</style>
